<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            text-align: center;
            margin: 20px auto;
            border: 2px solid black;
            border-collapse: collapse;

        }


        body {
            text-align: center;
        }

        #newmore {
            margin-top: 15px;
        }

        td,
        th {
            border: 1px solid #ddd;
            padding: 5px 10px;
        }

        td {
            padding: 0;
            height: 30px;
        }


        #newmoreDiv {
            width: 300px;
            height: 150px;
            position: absolute;
            left: 50%;
            bottom: 50%;
            margin-left: -150px;
            background: pink;
            z-index: 999;
            box-sizing: border-box;
            padding: 15px;
            display: none;
        }

        #none {
            position: absolute;
            right: 0px;
            top: -15px;
        }

        label {
            display: block;
        }

        #newmoreDiv>button {
            margin-top: 15px;
        }
    </style>
</head>

<body>
    <button id="newmore">新增一行</button>
    <div id="newmoreDiv">
        <button id="none">X</button>
        <label for="studentId">学号：
            <input type="text" id="studentId">
        </label>
        <label for="wname">姓名：
            <input type="text" id="wname">
        </label>
        <label for="age">年龄：
            <input type="text" id="age">
        </label>
        <label for="sex">性别：
            <input type="text" id="sex">
        </label>
        <button id="more">添加</button>
    </div>
    <table id="tableList">
        <thead>
            <tr>
                <th width="40">学号</th>
                <th width="160">姓名</th>
                <th width="60">年龄</th>
                <th width="160">性别</th>
                <th width="200">操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>001</td>
                <td>张三</td>
                <td>20</td>
                <td>男</td>
                <td>
                    <button class="btn1">向上移动</button>
                    <button class="btn2">向下移动</button>
                    <button class="btn3">删除</button>
                </td>
            </tr>
            <tr>
                <td>002</td>
                <td>小陈</td>
                <td>20</td>
                <td>男</td>
                <td>
                    <button class="btn1">向上移动</button>
                    <button class="btn2">向下移动</button>
                    <button class="btn3">删除</button>
                </td>
            </tr>
            <tr>
                <td>003</td>
                <td>小豪</td>
                <td>20</td>
                <td>男</td>
                <td>
                    <button class="btn1">向上移动</button>
                    <button class="btn2">向下移动</button>
                    <button class="btn3">删除</button>
                </td>
            </tr> -->
        </tbody>
    </table>
    <script>
        var newmore = document.getElementById('newmore')
        var newmoreDiv = document.getElementById('newmoreDiv')
        var more = document.getElementById('more')
        var none = document.getElementById('none')
        var top = document.getElementsByClassName('btn1')
        var bottom = document.getElementsByClassName('btn2')
        var detele = document.getElementsByClassName('btn3')
        var studentId = document.getElementById('studentId')
        var wname = document.getElementById('wname')
        var age = document.getElementById('age')
        var sex = document.getElementById('sex')
        var tbody = tableList.children[1];
        newmore.onclick = function () {
            newmoreDiv.style.display = 'block'
            studentId.value = ''
            wname.value = ''
            age.value = ''
            sex.value = ''
        }

        none.onclick = function () {
            newmoreDiv.style.display = 'none'
        }

        more.onclick = function () {
            // 生成一行
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' + studentId.value + '</td><td>' + wname.value + '</td><td>' + age.value +
                '</td><td>' + sex.value +
                '</td><td> <button class="btn1">向上移动</button><button class="btn2">向下移动</button><button class="btn3">删除</button></td>'
            // 往表格里添加行
            tbody.appendChild(tr);
            newmoreDiv.style.display = 'none'

            var top = document.getElementsByClassName('btn1')
            var bottom = document.getElementsByClassName('btn2')
            var detele = document.getElementsByClassName('btn3')

            // 绑定点击事件，移除tr
            for (var i = 0; i < detele.length; i++) {
                detele[i].onclick = function () {
                    tbody.removeChild(this.parentNode.parentNode);
                }
            }


            for (var i = 0; i < top.length; i++) {
                top[i].onclick = function () {
                    // 1.获取tr
                    var tr = this.parentNode.parentNode;
                    // 2.获取tbody
                    var tbody = tr.parentNode;
                    // 4.获取索引
                    var rowIdx = 0;

                    // 5.遍历tbody下全部行
                    for (var i = 0; i < tbody.rows.length; i++) {
                        // 6. 判断 是否等于当前点击按钮元素的tr
                        if (tbody.rows[i] == tr) {
                            // 7. 如果等于 ，将i的值给索引遍历，并跳出循环
                            rowIdx = i;
                            break;
                        }
                    }
                    // 排除第一行，不再往上
                    //8. 如果索引等于0 就是第一行了，不能再往上了
                    if (rowIdx == 0) return alert('已经是最上一行了');
                    // 如果不是第一行的索引，继续往下
                    // 9.1 获取并存储当前tr 的 前一个tr元素
                    var preTr = tbody.rows[rowIdx - 1];
                    // 9.2 获取并存储当前tr 的 下一个tr元素
                    var nextTr = tr.nextSibling;
                    // 9.3 移除当前tr的前一个tr
                    tbody.removeChild(preTr);
                    // 10.1. 判断当前tr是否存在下一个tr 如果存在则插入在下一个tr之前 格式insertBefore（要插入的元素, 定位的元素） 作用：将要插入的元素插入在定位元素之前
                    // 10.2 否则直接追加在表格的最后
                    // 在这里就一个目的 将当前tr的前一个元素删除了并把它放在我当前tr的之后，那我当前tr排位就上升了
                    // 所以 如果我当前有下一个tr就插入在他的之前，如果没有证明我是在最后一行，那就直接将元素追加在表格后面就行了
                    if (nextTr) tbody.insertBefore(preTr, nextTr);
                    else tbody.appendChild(preTr);
                    // -- -- --可选项 实现移动 保持序号不变-- -- -- -- -- --
                    // 1.获取当前tr 第一个td的内容
                    // var num = tr.cells[0].innerHTML;
                    // 2. 将当前tr 第一个td的内容 赋值为 前一个tr的第一个td的内容
                    // tr.cells[0].innerHTML = preTr.cells[0].innerHTML;
                    // 3. 将前一个tr的第一个td内容赋值 为 当前tr第一个td的内容
                    // preTr.cells[0].innerHTML = num;
                    // 4. 实现原理 类似于变量值交换，每次移动时将当前tr和前一个tr各自的第一个td内容进行交换即可，因为这里是向上的
                }
            }

            for (var i = 0; i < bottom.length; i++) {
                bottom[i].onclick = function () {
                    // 1.获取tr
                    var tr = this.parentNode.parentNode;
                    // 2.获取tbody
                    var tbody = tr.parentNode;
                    // 4.获取索引
                    var rowIdx = 0;

                    // 5.遍历tbody下全部行
                    for (var i = 0; i < tbody.rows.length; i++) {
                        // 6. 判断 是否等于当前点击按钮元素的tr
                        if (tbody.rows[i] == tr) {
                            // 7. 如果等于 ，将i的值给索引遍历，并跳出循环
                            rowIdx = i;
                            break;
                        }
                    }

                    // 4.判断 如果索引和tbody总行长度 相等 那么就是说 当前tr处于最后一行不能向下移动了，直接返回
                    // -1 是因为length的长度是从1开始算的，而索引是从0开始算的，所以-1 两个值才对等
                    if (rowIdx == tbody.rows.length - 1) return alert('已经是最后一行了');
                    // 5.获取当前tr的下一个tr
                    var nextTr = tbody.rows[rowIdx + 1];
                    // 6.获取下一个tr 的 下一个tr
                    var nextTrSibling = nextTr.nextSibling;
                    // 7.移除当前tr
                    tbody.removeChild(tr);
                    // 8. 判断是否存在下个tr的下个tr 存在则将当前tr 插入在他的之前
                    if (nextTrSibling) tbody.insertBefore(tr, nextTrSibling);
                    else tbody.appendChild(tr);
                    // 9.如果没有就证明 我在倒数第二行 那就直接追加就好了
                    // -- -- --可选项 实现移动 保持序号不变 -- -- -- -- -- --            
                    // 实现原理：采用交换变量的原理，都是交换内容来实现保持序号不变，只不过这里是和当前tr的下一个tr的第一个td交换
                    // var num = tr.cells[0].innerHTML;
                    // tr.cells[0].innerHTML = nextTr.cells[0].innerHTML;
                    // nextTr.cells[0].innerHTML = num;
                }
            }
        }
    </script>
</body>

</html>